<template>
  <div class="work-station-warp">
    <div class="real-container">
      <div class="banner"></div>

      <div class="content-warp">
        <div class="content-item-warp" v-for="(item, index) in tabList" :key="index">
          <div class="title">{{ item.name }}</div>

          <div class="list-warp">
            <div
              class="list-item"
              @click="goPath(lItem.path)"
              v-for="lItem in item.list"
              :key="lItem.name"
            >
              <van-image class="previewImage" fit="contain" :src="lItem.icon" />
              <div>{{ lItem.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import icon1 from "@/assets/images/workStation/icon_home_feature01.png";
import icon2 from "@/assets/images/workStation/icon_home_feature02.png";
import icon3 from "@/assets/images/workStation/icon_home_feature03.png";
import icon4 from "@/assets/images/workStation/icon_home_feature04.png";
import icon5 from "@/assets/images/workStation/icon_home_feature05.png";
import icon6 from "@/assets/images/workStation/icon_home_feature06.png";
import icon7 from "@/assets/images/workStation/icon_home_feature07.png";
import icon8 from "@/assets/images/workStation/icon_home_feature08.png";
import icon9 from "@/assets/images/workStation/icon_home_feature09.png";
import icon10 from "@/assets/images/workStation/icon_home_feature10.png";
import icon11 from "@/assets/images/workStation/icon_home_feature11.png";
import icon12 from "@/assets/images/workStation/icon_home_feature12.png";
import icon13 from "@/assets/images/workStation/icon_home_feature13.png";
import icon14 from "@/assets/images/workStation/icon_home_feature14.png";
import icon15 from "@/assets/images/workStation/icon_home_feature15.png";
import icon16 from "@/assets/images/workStation/icon_home_feature16.png";
import icon17 from "@/assets/images/workStation/icon_home_feature17.png";
import icon18 from "@/assets/images/workStation/icon_home_feature18.png";
import icon19 from "@/assets/images/workStation/icon_home_feature19.png";
import icon20 from "@/assets/images/workStation/icon_home_feature20.png";
import icon21 from "@/assets/images/workStation/icon_home_feature21.png";
import icon22 from "@/assets/images/workStation/icon_home_feature22.png";
import icon23 from "@/assets/images/workStation/icon_home_feature23.png";
import icon24 from "@/assets/images/workStation/icon_home_feature24.png";
import icon25 from "@/assets/images/workStation/icon_home_feature25.png";
import icon26 from "@/assets/images/workStation/icon_home_feature26.png";
import icon27 from "@/assets/images/workStation/icon_home_feature27.png";
import icon28 from "@/assets/images/workStation/icon_home_feature28.png";
import icon29 from "@/assets/images/workStation/icon_home_feature29.png";

const router = useRouter();
const tabList = ref([
  {
    name: "内涝风险识别",
    list: [
      {
        name: "风险点位管理",
        icon: icon1,
        path: "/riskPoint",
      },
      {
        name: "感知设备管理",
        icon: icon2,
      },
      {
        name: "基本信息维护",
        icon: icon3,
      },
      {
        name: "巡查养护管理",
        icon: icon4,
      },
    ],
  },
  {
    name: "内涝预警",
    list: [
      {
        name: "雨情管理",
        icon: icon5,
        path: "/rainManagement",
      },
      {
        name: "水情管理",
        icon: icon6,
        path: "/waterManagement",
      },
      {
        name: "气象管理",
        icon: icon7,
      },
      {
        name: "预警事件管理",
        icon: icon8,
      },
      {
        name: "汛期管理",
        icon: icon9,
      },
      {
        name: "防汛抗旱应急响应管理",
        icon: icon10,
      },
      {
        name: "应急能力评估",
        icon: icon11,
      },
      {
        name: "预警通知",
        icon: icon12,
      },
    ],
  },
  {
    name: "内涝响应",
    list: [
      {
        name: "响应任务管理",
        icon: icon13,
      },
      {
        name: "响应工单管理",
        icon: icon14,
      },
      {
        name: "应急资源管理",
        icon: icon15,
      },
      {
        name: "预案管理",
        icon: icon16,
      },
    ],
  },
  {
    name: "内涝处置",
    list: [
      {
        name: "告警管理",
        icon: icon17,
      },
      {
        name: "告警事件管理",
        icon: icon18,
      },
      {
        name: "工单管理",
        icon: icon19,
      },
    ],
  },
  {
    name: "内涝工程整治",
    list: [
      {
        name: "项目计划管理",
        icon: icon20,
      },
      {
        name: "项目进度管理",
        icon: icon21,
      },
      {
        name: "项目智能督办",
        icon: icon22,
      },
      {
        name: "项目竣工管理",
        icon: icon23,
      },
      {
        name: "项目评估管理",
        icon: icon24,
      },
      {
        name: "项目查询",
        icon: icon25,
      },
    ],
  },
  {
    name: "复盘评估",
    list: [
      {
        name: "工程管理",
        icon: icon26,
      },
      {
        name: "复盘管理",
        icon: icon27,
      },
      {
        name: "案例文库",
        icon: icon28,
      },
      {
        name: "值班报告管理",
        icon: icon29,
      },
    ],
  },
]);
const goPath = (path) => {
  router.push({
    path: path,
  });
};
</script>

<style lang="less" scoped>
.work-station-warp {
  background: rgba(243, 243, 243, 1);
  height: 100vh;
}

.real-container {
  // height: 100vh;
  height: calc(100vh - 52px);
  overflow: auto;
  background: rgba(243, 243, 243, 1);
  position: relative;
  z-index: 0;
}

.banner {
  background: url("@/assets/images/workStation/banner.png");
  background-size: 100% 100%;
  height: 248px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.content-warp {
  margin-top: 208px;
  // height: calc(100% - 50px - 208px);
  // height: calc(100% - 50px - 208px);
  z-index: 2;
  // position: absolute;
  overflow: auto;
  padding: 0 12px;
  .content-item-warp {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 16px;
      color: #000000;
    }
    .list-warp {
      margin-top: 15px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px 12px;
      .list-item {
        text-align: center;
        font-family: PingFang TC, PingFang TC;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
}

.previewImage {
  width: 48px;
  height: 48px;
}
</style>
